<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 多媒体查询实例</title>
    <style>
        /* 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下： */
        ul {
            list-style-type: none;
        }

        ul li a {
            color: green;
            text-decoration: none;
            padding: 3px;
            display: block;
        }
    </style>
</head>

<body>

    <ul>
        <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
        <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
        <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
        <!-- 注意 data-email 属性。在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。 -->
    </ul>

</body>

</html>